﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>CSS技术</title>
    <link rel="stylesheet" href="00 CSS/menu.css" />
    <style type="text/css">

        /*高度自适应*/
        html, body {
            height: 100%;
            overflow: hidden;
        }

        #menu {
            height: 20px;
            margin-bottom: 15px;
        }

        /*内容区域*/
        iframe.contentFrame {
            border: none;
            width: 100%;
            height: 100%;
        }

        #content {
            width: 99%;
            height: 90%;
            border: 1px solid #DCDCDC;
        }



    </style>
</head>
<body>
    <div id="menu">
        <ul class="nav">
            <li>
                <a href="#">选择器</a>
                <ul>
                    <li><a href="01 选择器/simpleSelector.html" target="myContent">简单选择器</a></li>
                    <li><a href="01 选择器/advancedSelectors.html" target="myContent">高级选择器</a></li>
                    <li><a href="01 选择器/particularity.html" target="myContent">规则性</a></li>
                </ul>
            </li>
            <li>
                <a href="#">可视化格式模型</a>
                <ul>
                    <li><a href="02 可视化格式模型/boxModel.html" target="myContent">盒模式</a></li>
                    <li><a href="02 可视化格式模型/position.html" target="myContent">定位</a></li>
                </ul>
            </li>
            <li>
                <a href="#">背景图像效果</a>
                <ul>
                    <li><a href="03 背景图像效果/圆角框/circleRet.html" target="myContent">圆角框</a></li>
                    <li><a href="03 背景图像效果/项目符号/background.html" target="myContent">项目符号</a></li>
                </ul>
            </li>
            <li>
                <a href="#">衔接样式</a>
                <ul>
                    <li><a href="04 衔接样式/linkStyle.html" target="myContent">衔接样式</a></li>
                </ul>
            </li>
            <li>
                <a href="#">列表样式</a>
                <ul>
                    <li><a href="05 列表样式\ulstyle.html" target="myContent">列表样式</a></li>
                </ul>
            </li>
            <li>
                <a href="#">数据表格</a>
                <ul>
                    <li><a href="06 数据表格/table.html" target="myContent">table样式</a></li>
                    <li><a href="06 数据表格/form.html" target="myContent">form样式</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="content">
        <iframe name="myContent" class="contentFrame" ></iframe>
    </div>
</body>
</html>
